<script setup>
import { ArrowRight } from '@element-plus/icons-vue'

import {onMounted, ref, watch} from 'vue'
import HomeGood from '@/views/Home/components/HomeGood.vue'
import {useCategory} from './composables/useCategory.js'
// watch(route,()=>getTopCategory(route.params.id))
import {useBanner} from './composables/useBanner.js'
const {categoryData} = useCategory()
const {bannerList} = useBanner()
</script>

<template class="center">
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
  </el-breadcrumb>
<!-- 轮播图 -->
<div class="home-banner">
  <el-carousel height="500px">
      <el-carousel-item v-for="item in bannerList" :key="item">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
  </el-carousel>
</div>

<div class="sub-list">
  <h3>全部分类</h3>
  <ul>
    <li v-for="i in categoryData.children" :key="i.id">
      <RouterLink :to="`/category/sub/${i.id}`">
        <img :src="i.picture" />
        <p>{{ i.name }}</p>
      </RouterLink>
    </li>
  </ul>
</div>
<div class="ref-goods" v-for="item in categoryData.children" :key="item.id">
  <div class="head">
    <h3>- {{ item.name }}-</h3>
  </div>
  <div class="body">
    <HomeGood v-for="good in item.goods" :good="good" :key="good.id" />
  </div>
</div>

</template>

<style>
.center{
  
}
.el-breadcrumb{
  width: 1240px;
  margin: 10px auto;
  margin-bottom: 20px;
}
.home-banner {
  width: 1240px;
  height: 500px;
  margin: 0 auto;

  img {
    width: 100%;
    height: 500px;
  }
}
.sub-list{
  width: 1240px;
  margin: 10px auto;
  ul{
    display: flex;
    justify-content: space-around;
    padding: 30px 0;
    img{
      width: 120px;
      height: 120px;
    }
  }
}
.ref-goods{
  width: 1240px;
  margin: 10px auto;
  text-align: center;
  background-color: white;
  padding: 30px 0;
  h3{
    font-weight: 700;
    font-size: 2em;
    margin-bottom: 30px;
  }
  .body{
    display: flex;
    justify-content: space-around;
  }
}

</style>